.ctx-top-flex{
  display: flex;
  &-item{
    background: #1f2025;
    border-radius: 12px;
    height: 400px;
    box-sizing: border-box;
    padding-bottom: 30px;;

    &-title{
      box-sizing: border-box;
      height: 68px;
      line-height: 68px;
      border-bottom: 1px solid transparent;
      // border-bottom: 1px solid #2c2d33;
      padding: 0 30px;
      font-size: 18px;

      &-h2{
        color: #e6e9f5;
      }
      .icon{
        color: #70727e;
        font-size: 18px;
        margin-right: 10px;
      }

      &.bdColor{
        border-color: #2c2d33;
      }

      &-nav{
        display: inline-block;
        position: relative;
        color: #767e91;
        margin-right: 35px;
        cursor: pointer;

        &.active{
          position: relative;
          color: #e6e9f5;
          &::before{
            position: absolute;
            left: 50%;
            margin-left: -15px;
            content: '';
            width: 30px;
            bottom: 0;
            height: 3px;
            border-radius: 3px;
            background-color: #e6e9f5;
          }
        }
      }
    }

    &-ctx{
      padding: 0 30px;
      margin-top: 10px;
      &-info{
        display: flex;
        &-img{
          width: 82px;
          height: 82px;
          border-radius: 50%;
          background: gold;
        }
        &-group{
          margin-left: 22px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          &-h3{
            font-size: 14px;
            color: #e6e9f5;
          }
          &-desc{
            margin-top: 10px;
            color: #767e91;
          }
        }
      }
      &-value{
        display: flex;
        margin-top: 28px;
        height: 14px;
        align-items: center;
        .ctx-title,
        .ctx-value{
          color: #767e91;
        }
        .ctx-progress{
          flex: 1;
          margin: 0 20px;
        }
      }
      &-desc{
        border-radius: 5px;
        background-color: #262930;
        margin-top: 28px;
        height: 140px;
        box-sizing: border-box;
        padding: 10px 30px;
        overflow-y: auto;
        word-wrap: break-word;
        font-size: 14px;
        line-height: 1.6;
        color: #767e91;
      }
    }

    &-analy{
      border-radius: 3px;
      background: #262930;
      margin-top: 30px;
      padding: 20px;
      margin: 30px;
      &-top{
        display: flex;
        .img{
          width: 186px;
          height: 120px;
          min-width: 186px;
          border-radius: 3px;
          background: greenyellow;
        }
        .ctx-desc{
          margin-left: 18px;
          &-ctx{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #b3b9c7;
            line-height: 1.5;
            margin-top: 18px;
          }

          &-bottom{
            margin-top: 20px;
            color: #767e91;
          }
        }
      }

      &-bottom{
        position: relative;
        margin-top: 20px;
        background: #2d3138;
        height: 94px;
        border-radius: 3px;
        box-sizing: border-box;
        padding: 20px 20px 0;
        &::before{
          position: absolute;
          content:'';
          left: 80px;
          bottom: 100%;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #2d3138;
        }

        .bottom-txt1,
        .bottom-txt2{
          color: #b3b9c7;
          line-height: 1;
        }

        // .bottom-txt1{
        //   margin-top: 20px;
        // }
        .bottom-txt2{
          margin-top: 20px;
        }
      }
    }

  }

  &-item:first-child,
  &-item:last-child{
    width: 452px;
  }

  &-second{
    flex: 1;
    margin: 0 20px;
  }
}


.ctx-mt{
  margin-top: 20px;
}

.dialog{
  width:100%;
  height:100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background:rgba(0,0,0,0);
  position: fixed;
  top:0;
  left:0;
  z-index:100;
  .dialog-cont{
    width:600px;
    max-height:740px;
    background: #282b3c;
    border-radius: 12px;
    box-shadow: 0px 6px 24px 0px rgb( 24, 25, 30 );
    z-index: 400;
    padding:30px 26px 48px 30px;
    box-sizing: border-box;
    position: relative;
    .dialog-tit {
      border-radius: 8px;
      background-color: rgb( 58, 63, 87 );
      width: 100%;
      height: 150px;
      padding:30px 35px;
      box-sizing: border-box;
      .p1{
        margin:0 0 20px 0;
        background:url(../../assets/icon_window.png) no-repeat;
        background-size:24px 24px;
        height: 24px;
        line-height: 24px;
        font-size:16px;
        color:#fff;
        font-weight:700;
        padding-left:32px;
      }
      .tit-content{
        display: flex;
        li{
          flex:1;
          p{margin:0}
          .tit{
            font-size:12px;
            line-height: 14px;
            color:#767e91;
            margin-bottom:16px;
          }
          .txt{
            font-size:14px;
            line-height: 16px;
            color:#fff;
            font-weight:700
          }
        }
      }
    }

   
  }
  .dialog-content{
    overflow-y: auto;
    max-height: 555px;
    .item-list{
      padding:30px 0 20px;
      border-bottom: 1px dashed rgba(118, 126, 145, .4);
      p{
        margin:0;
      }
      .p1{
        display: flex;
        margin-bottom:20px;
        span{
          padding:0 12px 0 42px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color:#fff;
          font-weight:700;
          border-radius:15px;
        }
        .s1{
          background:#FF6666 url(../../assets/icon_white_biao.png) no-repeat 12px center;
          background-size:24px 24px;
          margin-right: 20px;
        }
        .s2{
          background:#5673FF url(../../assets/icon_A.png) no-repeat 12px center;
          background-size:24px 24px;
        }
      }
      .p2{
        margin-bottom:5px;
        font-size:14;
        line-height: 16px;
        color: #E6E9F5;
        font-weight: 700;
      }
      .p3{
        font-size: 12px;
        color: #767E91;
        line-height: 24px;
        overflow: hidden;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        text-overflow: ellipsis;
      }
    }
  }
  i{ 
    position: absolute;
    right:-36px;
    top:-20px;
    color:#fff;
    font-size:28px;
    cursor: pointer;
  }
}
.ctx-top-flex-item-ul{
    height:300px;
    overflow-y: auto;
  .speech-item{
    display:flex;
    margin:20px 0 5px;
    cursor: pointer;
    .speech-item-icon{
      width:24px;
      height:24px;
      background:url(../../assets/icon_red_biao.png) no-repeat;
      background-size:100% 100%;
      margin-right:12px;
    }
    .item-content{
      flex: 1;
      overflow: hidden;
      .item-tit{
        font-size: 14px;
        color:#fff;
        font-weight:700;
        line-height:16px;
        margin:0 0 11px 0
      }
      .item-txt{
        font-size: 12px;
        color:#767e91;
        line-height:24px;
        overflow: hidden;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        text-overflow: ellipsis;
        margin:0
      }
  
    }
  }
}

